<template>
  <div clas="fee-summary">
    <template v-if="prevFeeForm && Object.keys(prevFeeForm).length > 0">
      <div class="fee-summary-header fee-summary-header-switch">
        <a-radio-group v-model="feeSwitch" type="button">
          <a-radio value="curr">续租费用信息</a-radio>
          <a-radio value="prev">原费用信息</a-radio>
        </a-radio-group>
      </div>
      <fee-statistic-content :feeForm="feeSwitch == 'curr' ? feeForm : prevFeeForm" />
    </template>
    <template v-else>
      <div class="fee-summary-header"> 费用信息 </div>
      <fee-statistic-content :feeForm="feeForm" />
    </template>
  </div>
</template>
<script setup>
  import { ref, inject } from 'vue'
  import feeStatisticContent from './fee-statistic-content.vue'

  defineProps({
    prevFeeForm: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })
  const feeSwitch = ref('curr')
  const feeForm = inject('feeForm')
</script>
<style lang="less" scoped>
  .fee-summary-header {
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    background: #f2f3f5;
    font-weight: 600;
    color: #1d2129;
  }
  .fee-summary-header-switch {
    padding: 0 6px;
    :deep(.arco-radio-button-content) {
      padding: 0 10px;
    }
    :deep(.arco-radio-button + .arco-radio-button) {
      margin-left: 10px;
    }
    :deep(.arco-radio-button:hover) {
      background-color: inherit;
    }
  }
</style>
